cascading style sheets reference
תכונות | סגנון טקסט | מערך טקסט | רקע | גבול | שוליים | ריפוד | מערך עמוד | סוג אלמנט | ממשק משתמש
מערך העמוד
אחת המגבלות המשמעותיות ביותר ב-HTML הייתה חוסר היכולת לערוך את הדפים באותה הצורה שבה הם היו ערוכים על הנייר. הדבר יכול להיות אפשרי, למרות שלא תמיד, לערוך דפים בעזרת טבלאות ו-spacer gifs (1 פיקסל), אך שניהם מפרים את העיקרון שלנו של הפרדה בין תוכן ומראה, ובטוח שהדבר יגרום לבעיות אחזקה עד קץ הימים, כיוון שגרסאות חדשות של דפדפנים נכשלות בעריכה של הדפים בדיוק כפי שקרה בדפדפנים ישנים יותר.
בעזרת CSS יש לכם כעת את היכולת למקם אלמנטים על דפי אתר בעזרת מיקום מוחלט, קבוע, יחסים וסטאטי.
מיקום מוחלט פירושו, שהאלמנט ממוקם על הדף בצורה עצמאית לחלוטין מן הזרימה של כל שאר הדף. למיקום שלו אין כל יחס למיקום או לגודל של ההורה שלו, או של האלמנט המכיל אותו. מיקום מסוים מוגדר ביחס לפינה השמאלית העליונה של הדף.
מיקום קבוע הוא תת קבוצה של מיקום מוחלט. אלמנט בעל מיקום קבוע ממוקם ביחס לחלון, ולא ביחס לפינה השמאלית של הדף. פירושו של דבר, שכאשר הדף מתגלגל האלמנט הקבוע נשאר במקומו אשר בחלון, ממש כמו דמות רקע שהינה קבועה.
במיקום יחסי האלמנטים נוהגים ממש כמו שהיו מתנהגים באופן נורמלי בדפי HTML, כלומר הם זורמים אל המיקום. המיקום שלהם מותאם, בהכרח, ביחס להיכן שבדרך כלל מוצאים אותם (כלומר, ביחס למיקום הסטאטי שלהם, ראו מתחת); לדוגמא, הזיזו מספר פיקסלים מעל היכן שבאופן נורמלי הם היו בזרימה של המסמך.
מיקום סטאטי הוא ערך ברירת המחדל של מיקום, וביסודו זהו סוג המיקום שאנו מכירים ומעדיפים. כלומר, האלמנטים זורמים בהסתמך על האלמנט המכיל אותם (ההורה) ועל אלמנטים אחים (sibling).
בנוסף למיקום, תכונות מערך הדף מאפשרות לנו להגדיר רוחב וגובה של אלמנטים. CSS גם מאפשר למפתח להגדיר את (z מפתח ) z-index או את סדר המערום עבור האלמנט (אשר קובע איזה אלמנט מופיע לפני אלמנט אחר, כך שהוא מסתיר אותו אם הם חופפים); כיצד אמורים להיות מוצגים התכנים כאשר הם גדולים מדיי עבור הרוחב והגובה המתוארים (הדבר נקרא גלישה=overflow). ניתן להגדיר אם האלמנט יהיה נראה לעין (visible) או לא, ולבסוף, CSS גם מאפשר לנו להגדיר מה שידוע מבחינה טכנית כאזור הקיצוץ (clipping area), או הקיצוץ (clip) של האלמנט. זהו החלק באלמנט שהוא מצוייר מעשית.
המיקום מאפשר מערך דף מאוד מתוחכם, אך כמו עם כל טכנולוגיה רבת-עוצמה, הוא מסובך לעיתים. עבור עוד פרטים בנושא מיקום בעזרת CSS, בדקו בשיעור המעשי שלנו על מיקום בעזרת CSS2 .
האלמנטים של מערך הדף הם:
back to top
מיקום - position
מה הם עושים?
תכונת המיקום מגדירה אך ורק כיצד האלמנט ימוקם על הדף ע"י הדפדפן. המיקום האמיתי מוגדר בעזרת תכונות העליון (top) והשמאל (left) שנדבר עליהן עוד מעט.
ערכים אפשריים
האלמנטים יכולים להיות ממוקמים באחת מארבע דרכים: בדרך סטאטית, יחסית, מוחלטת או קבועה. הערך מוגדר בעזרת אחת מתוך ארבע מילות מפתח: static, relative, absolute ו fixed.
כאשר מיקומו של האלמנט הוא סטאטי (static), הדפדפן יצייר את האלמנט במקום הרגיל שלו. בעיקרון, זהו המיקום המסורתי המשמש ב-HTML ישר.
כאשר המיקום מוגדר כיחסי, האלמנט ימוקם ביחס למיקום הטבעי שלו, כלומר, ביחס להיכן שהוא היה ממוקם מבחינה סטאטית.
לדוגמא, במיקום יחסי, top של 20px ו-left של 20px (מיד גם נבחן את תכונות העליון והשמאל), האלמנט ימוקם 20px לימין ו20px- מתחת להיכן שהוא היה ממוקם באופן טבעי, או למיקומו הסטאטי.
בעזרת מיקום מוחלט (absolute) האלמנט ממוקם במיקום מוגדר ביחס לפינה השמאלית העליונה של הדף, או ביחס לאלמנט ההורה שלו. מיקום קבוע, כפי שראינו, קשור לכך. במקום שהאלמנט יהיה ממוקם ביחס לפינה השמאלית העליונה של הדף, הוא ממוקם ביחס לפינה השמאלית של החלון. פירושו של דבר, שאם העמוד מתגלגל, האלמנט נשאר קבוע ביחס לפינה השמאלית העליונה של החלון.
ערכים של ברירת מחדל
כאשר לא מוגדרת כל תכונה של מיקום, האלמנט יקבל מיקום סטאטי.
האם זה עובר בירושה?
האלמנט אינו יורש את תכונת המיקום של ההורה שלו.
רמזים והצעות
חשבו על ההבדלים בין הסוגים השונים האפשריים של מיקום. אנו נדון המכאניזם השלם של המיקום באופן נרחב יותר השיעור המעשי שלנו - מיקום בעזרת CSS2.
עליון - top
מה הם עושים?
תכונת העליון מגדירה היכן ימוקם החלק העליון של האלמנט. זכרו כי המיקום המעשי על הדף מושפע מן הערך של תכונת המיקום שראינו כעת, למעלה.
עליון הוא איזון מן המיקום הטבעי של האלמנט (עבור מיקום יחסי), מן החלק העליון של הדף או מן החלק העליון של האלמנט ההורה (עבור מיקום מוחלט), או מן החלק העליון של החלון (עבור מיקום קבוע). עבור יותר פרטים לגבי מתי משתמשים בכל אחד מהם, בדקו למעלה אודות המיקום.
ערכים שליליים של עליון (top) מזיזים את האלמנט למעלה בדף; ערכים חיוביים מזיזים את האלמנט במורד הדף. עבור אלמנטים בעלי מיקום סטאטי, לעליון אין כל השפעה.
ערכים אפשריים
ניתן להגדיר את החלק העליון של האלמנט בעזרת ערכיי אורך, ערכיי אחוז, או בעזרת מילת המפתח auto.
ערכיי אורך
כאשר החלק העליון מוגדר בעזרת ערך אורך, האלמנט מקוזז במעלה או במורד הדף מהמיקום שנקבע ע"י ערך המיקום (position) של האלמנט.
אנו עוסקים בערכיי אורך בפרוטרוט בחלק שלנו אודות ערכים.
Auto
העליון של auto ממקם את האלמנט ללא איזון במעלה או במורד הדף.
ערכים של ברירת מחדל
אם לא מוגדר כל חלק עליון, החלק העליון של האלמנט הוא auto.
האם זה עובר בירושה?
האלמנט אינו יורש את החלק העליון של ההורה שלו, ואולם, האלמנט יכול להיות מושפע מן המיקום של האלמנט ההורה שלו.
רמזים והצעות
העליון מגדיר היכן יופיע האלמנט יחד עם תכונת המיקום, המגדירה כיצד ימוקם האלמנט ביחס להורה שלו או ביחס לדף. אתם תצטרכו הבנה סבירה בנושא אופן העבודה של המיקום כדי להבטיח שתזכו בתוצאות הרצויות לכם. אנו מכסים בפרוטרוט את נושא המיקום בשיעור המעשי שלנו - מיקום בעזרת CSS2 .
שמאל - left
מה הם עושים?
תכונת השמאל (left) מגדירה היכן ימוקם החלק השמאלי של האלמנט. זכרו כי המיקום המעשי על הדף מושפע מן הערך של תכונת המיקום, שראינו למעלה.
שמאל הוא איזון או מן המיקום הטבעי של האלמנט (עבור מיקום יחסי), או מן החלק השמאלי של הדף או של האלמנט ההורה (עבור מיקום מוחלט), או מן החלק השמאלי של החלון (עבור מיקום קבוע). בדקו בסעיף של המיקום, למעלה, עבור יותר פרטים לגבי מתי להשתמש בכל אחד.
ערכים שליליים של שמאל מזיזים את האלמנט שמאלה לאורך הדף; ערכים חיוביים של שמאל מזיזים את האלמנט ימינה.
עבור אלמנט בעל מיקום סטאטי, לשמאל אין כל השפעה.
ערכים אפשריים
ניתן להגדיר את החלק השמאלי של האלמנט בעזרת ערכיי אורך (length), ערכיי אחוז, או בעזרת מילת המפתח auto.
ערכיי אורך
כאשר החלק השמאלי מוגדר בעזרת ערך אורך, האלמנט מקוזז לצד השמאלי או הימני לאורך הדף ממיקום הנקבע בעזרת ערך המיקום של האלמנט.
אנו מפרטים יותר על ערכיי אורך בחלק שלנו בנושא ערכים.
ערכיי אחוז
כאשר החלק השמאלי מוגדר כערך אחוזי, האלמנט מקוזז לצד השמאלי או הימני לאורך הדף באותו האחוז של רוחב האלמנט ההורה שלו.
אנו מכסים את נושא ערכיי האחוז בפרוטרוט בחלק שלנו בנושא ערכים.
Auto
החלק השמאלי בauto ממקם את האלמנט ללא איזון ימינה או שמאלה על הדף.
ערכים של ברירת מחדל
אם לא מוגדר כל חלק שמאלי, החלק השמאלי של האלמנט הוא auto.
האם זה עובר בירושה?
האלמנט אינו יורש את השמאל של האלמנט ההורה שלו. ואולם, החלק השמאלי של האלמנט יכול להיות מושפע ע"י המיקום של ההורה שלו.
רמזים והצעות
שמאל מגדיר היכן יופיע האלמנט בשילוב עם תכונת המיקום, המגדירה כיצד האלמנט ימוקם ביחס להורה שלו על הדף. עליכם להבין הבנה סבירה של כיצד עובד המיקום כדי להבטיח שתזכו בתוצאות הרצויות לכם. אנו מכסים את נושא המיקום בפרוטרוט השיעור המעשי שלנו - מיקום בעזרת CSS2 .
back to top
תחתון - bottom
מה הם עושים?
תכונת התחתון (bottom) מגדירה היכן הקצה התחתון של האלמנט ימוקם. זכרו כי המיקום המעשי על הדף מושפע מערך תכונת המיקום, שראינו למעלה.
תחתון הוא איזון או מן המיקום הטבעי של האלמנט (עבור מיקום יחסי), מן החלק העליון של הדף או מן החלק העליון של האלמנט ההורה (עבור מיקום מוחלט), או מן החלק העליון של החלון (עבור מיקום קבוע). בדקו את סעיף המיקום עבור יותר פרטים מתי להשתמש בכל אחד מהם.
עבור אלמנטים בעלי מיקום סטאטי, לתחתון אין כל השפעה.
ערכים אפשריים
ניתן להגדיר את החלק התחתון של האלמנט בעזרת ערכיי אורך, ערכיי אחוז, ובעזרת מילת המפתח auto.
ערכיי אורך
כאשר החלק העליון מוגדר בעזרת ערך אורך, האלמנט מאוזן במעלה או במורד הדף מן המיקום שנקבע ע"י ערך המיקום של האלמנט.
אנו מכסים את נושא ערכיי אורך בפרוטרוט בחלק שלנו אודות ערכים.
ערכיי אחוז
כאשר החלק התחתון מוגדר בערך אחוזי, הקצה התחתון של האלמנט מאוזן במעלה או במורד הדף באותו האחוז של גובה האלמנט ההורה שלו.
אנו מכסים את ערכיי אחוז האחוז בפרוטרוט בחלק שלנו אודות ערכים.
Auto
החלק התחתון של auto ממקם את האלמנט ללא איזון במעלה או במורד הדף.
ערכים של ברירת מחדל
אם לא הוגדר כל חלק תחתון, התחתון של האלמנט הוא auto.
האם זה עובר בירושה?
האלמנט אינו יורש את התחתון של ההורה שלו.
ימין - right
מה הם עושים?
תכונת הימין (right) מגדירה היכן ימוקם הקצה הימני של האלמנט. זכרו כי המיקום האמיתי על הדף מושפע מערך של תכונת המיקום שראינו למעלה.
ימין הוא איזון מהמיקום הטבעי של האלמנט (עבור מיקום יחסי), מהחלק השמאלי של הדף או מהחלק השמאלי של האלמנט ההורה (עבור מיקום מוחלט), או מהחלק השמאלי של החלון (עבור מיקום קבוע). בדקו בסעיף של המיקום, למעלה, עבור מתי כל אחד בא לידי שימוש.
עבור אלמנטים בעלי מיקום סטאטי, לשמאל אין כל השפעה.
ערכים אפשריים
ניתן להגדיר את החלק הימני של האלמנט בעזרת ערכיי אורך, ערכיי אחוז, או בעזרת מילת המפתח auto.
ערכיי אורך
כאשר החלק הימני מוגדר בעזרת ערך אורך, הקצה הימני של האלמנט מאוזן לשמאל או לימין במורד הדף, מן המיקום שנקבע ע"י ערך המיקום של האלמנטt.
אנו מכסים בפרוטרוט את נושא ערכיי אורך האורך בחלק שלנו אודות ערכים.
ערכיי אחוז
כאשר החלק הימני מוגדר בעזרת ערך אחוזי, החלק הימני של האלמנט מאוזן לשמאל או לימין במורד הדף באותו האחוז של רוחב האלמנט ההורה שלו.
אנו מכסים בפרוטרוט את ערכיי אחוז בחלק שלנו העוסק בערכים.
Auto
הימין של auto ממקם את הקצה הימני של האלמנט ללא איזון ימינה או שמאלה על הדף.
ערכים של ברירת מחדל
אם לא הוגדר כל ימין שהוא, החלק הימני של האלמנט הוא auto.
האם זה עובר בירושה?
האלמנט אינו יורש את הימין של ההורה שלו.
רוחב - width
מה הם עושים?
שלא באופן מפתיע, תכונה זו מגדירה כמה רחב יופיע האלמנט על הדף.
ערכים אפשריים
הרוחב יכול להיות מוגדר כאחוז, כערך אורך או כ-auto.
ערכיי אחוז
כאשר הרוחב מוגדר כאחוז, רוחב האלמנט הוא אותו אחוז הרוחב של ההורה שלו. אנו מכסים את נושא ערכיי אחוז בפירוט בחלק שלנו אודות ערכים.
ערכיי אורך
ניתן להגדיר את הרוחב כאורך. אנו מתעכבים על אורכים בפירוט בחלק שלנו העוסק בערכים.
Auto
הרוחב של auto הוא רוחב ברירת המחדל של פריט כלשהו.
ערכים של ברירת מחדל
אם לא נקבע כל ערך עבור רוחב האלמנט, רוחבו ייקבע ל-auto.
האם זה עובר בירושה?
האלמנט אינו יורש את רוחב ההורה שלו.
רמזים והצעות
הרוחב הוגדר כחלק מן ההמלצה המקורית של CSS1. הוא שונה מעט בהמלצה של CSS2.
min-width
מה הם עושים?
תכונה זו מאפשרת לכם להגדיר מינימום רוחב עבור האלמנט. כאשר רוחב האלמנט מחושב, אם הוא פחות מן התכונה, זה מגדיר את הרוחב של האלמנט.
ערכים אפשריים
ניתן להגדיר מינימום-רוחב בעזרת אחוז, ערך אורך או none.
ערכיי אחוז
כאשר מוגדר מינימום-רוחב כאחוז, מינימום-הרוחב של האלמנט הוא אותו האחוז של רוחב ההורה שלו. אנו מכסים את נושא הערכים האחוזיים בפירוט בחלק שלנו העוסק בערכים.
ערכיי אורך
ניתן להגדיר מינימום-רוחב כאורך. אנו מכסים את נושא האורכים בפירוט בחלק שלנו העוסק בערכים.
ערכים של ברירת מחדל
אם לא נקבע כל ערך עבור מינימום-רוחב של האלמנט, המינימום-רוחב שלו נקבע ל-none.
האם זה עובר בירושה?
האלמנט אינו יורש את מינימום-הרוחב של ההורה שלו.
max-width
מה הם עושים?
תכונה זו מאפשרת לכם להגדיר רוחב מקסימלי עבור האלמנט. כאשר מחושב הרוחב של האלמנט, אם הוא גדול יותר מתכונה זו, זה מגדיר את הרוחב של האלמנט.
ערכים אפשריים
ניתן להגדיר מקסימום-רוחב כאחוז, כערך אורך או כ-none.
ערכיי אחוז
כאשר מקסימום-הרוחב מוגדר כאחוז, הרוחב המקסימלי שלו הוא אותו האחוז של רוחב ההורה שלו. אנו מכסים את נושא הערכים האחוזיים בפירוט בחלק שלנו אודות ערכים.
ערכיי אורך
ניתן להגדיר את מקסימום-הרוחב כאורך. אנו מכסים את ערכיי האורך בפירוט בחלק שלנו העוסק בערכים.
ערכים של ברירת מחדל
אם לא נקבע כל ערך למקסימום-הרוחב של האלמנט, הרוחב-המקסימלי שלו ייקבע ל-none.
האם זה עובר בירושה?
האלמנט אינו יורש את מקסימום-הרוחב של ההורה שלו.
גובה
מה הם עושים?
תכונת הגובה מאפשרת לכם להגדיר את גובה האלמנט במספר דרכים.
ערכים אפשריים
ניתן להגדיר את הגובה כאחוז, כערך אורך או כ-auto. גבהים אחוזיים הם חלק מהמלצת CSS2, אך הם לא היו חלק מהמלצת CSS1 המקורית.
ערכיי אחוז
כאשר גובה מוגדר כאחוז, גובהו הוא האחוז הזה מגובה ההורה שלו. אנו מכסים את נושא הערכים האחוזיים האחוזים בפירוט בחלק שלנו העוסק בערכים.
ערכיי אורך
ניתן להגדיר את הגובה כאורך. אנו מכסים את נושא ערכיי האורך בפירוט בחלק שלנו העוסק בערכים.
Auto
גובה של auto הוא גובה ברירת המחדל של פריט כלשהו.
ערכים של ברירת מחדל
אם לא נקבע כל ערך עבור גובה האלמנט, הגובה שלו ייקבע ל-auto.
האם זה עובר בירושה?
האלמנט אינו יורש את גובה ההורה שלו.
רמזים והצעות
הגובה הוגדר כחלק מהמלצת CSS1 המקורית. הוא שונה בחלקו ע"י המלצת CSS2.
מפתח-z
מה הם עושים?
מכיוון ש-CSS מאפשר את המיקום המוחלט של אלמנטים על הדף, אנו צריכים לשים לב היכן האלמנטים חופפים.
ערכים אפשריים
מפתח-z מוגדר או בעזרת מספר שלם או בעזרת מילת המפתח auto.
ערכים של מספרים שלמים
כאשר מפתח ה-z מוגדר בעזרת מספר שלם, ככל שהמספר גבוה יותר, כך קרוב האלמנט יותר אל החלק הקדמי. קיים גורם מסבך כאשר האלמנטים משתלבים זה בתוך זה. סדר המערום הוא יחסי לאלמנטים החולקים את אותו אלמנט ההורה. עבור יותר פרטים בנושא מערום, בדקו בשיעור המעשי שלנו מיקום בעזרת CSS2 .
Auto
כאשר מפתח ה-z מוגדר כ-auto, הדפדפן מחליט על מקום האלמנט בסדר המערום לפי סדרת חוקים די מסובכת, אך בקצרה, בסדר שבו האלמנטים מופיעים בקוד ה-HTML של הדף. אם ברצונכם להבין לגמרי את אופן הפעולה של מערום, אנא, בדקו בחלק של הרעיונות של דפי הסגנון המתקדמים.
ערכים של ברירת מחדל
אם לא הוגדר כל מפתח-z שהוא, מפתח ה-z של האלמנט יהיה auto.
האם זה עובר בירושה?
האלמנט אינו יורש את מפתח ה-z של אלמנט ההורה שלו. ואולם, המערום של אלמנטים הוא יחסי לאלמנטים ההורים. כלומר, כאשר יש לנו שני אלמנטים, ולשניהם יש אלמנטים ילדים, אזי כל האלמנטים הילדים של ההורה בעל מפתח ה-z הגבוה יותר הם מקדימים (מקדימה) את כל האלמנטים הילדים של אלמנט ההורה האחר.
רמזים והצעות
למרות שהחוקים הקשורים למערום נראים מסובכים, הם למעשה הדרך האינטואיטיבית שבה יפעל המערום. אם ישנם שני אלמנטים, ולכל אחד מהם אלמנטים ילדים, אזי זה הגיוני שכל הילדים של האלמנט הכי קדמי יהיו קדימה יותר מכל הילדים של האלמנט שמאחור
ניתן ליישם חוק זה בצורה מחוברת, כך שבתוך האלמנט, אם ליותר מילד אחד יש אלמנטים ילדים, אזי הילדים של הילד הכי קדמי הם כולם מקדימים את הילדים של הילד האחר. וכו'…
visibility - ראות
מה הם עושים?
אמנם זה לא הגיוני להפוך אלמנט כלשהו על הדף לבלתי-נראה, יחד עם כתב-יד מודפס (scripting) (כמו לדוגמא עם Javescript), הצגה או הסתרה של אלמנטים כאשר המשתמש מקליק עליהם, או כאשר הוא מעביר את העכבר מעל האלמנט, או אפילו בהתבסס על זמן - זה יכול להיות כלי רב עוצמה. תכונת הראות מאפשרת לכם להפוך את האלמנט לנראה או לבלתי-נראה.
ערכים אפשריים
ניתן להגדיר ראות באחת מתוך שלוש מילות מפתח, visible (נראה), hidden (מוסתר) ו-inherit (עובר בירושה).
ראות של visible ושל hidden היא פשוטה וברורה.
ראות של inherit מגדירה כי לאלמנט חייבת להיות את אותה הראות כמו זו של ההורה שלו.
ערכים של ברירת מחדל
אם לא מוגדרת כל ראות, לאלמנט תהיה ראות של inherit.
האם זה עובר בירושה?
האלמנט יירש את הראות של ההורה שלו רק אם ראות האלמנט נקבעה ל-inherit.
רמזים והצעות
אלמנט בעל ראות של hidden עדיין משפיע על הציור והמערך של הדף. הדף עדיין נערך כאילו שהאלמנט היה נראה. אם אתם רוצים שהדף ייערך כאילו שהאלמנטים לא היו שם כלל (ועבור האלמנט שגם הוא יהיה נראה) אזי תכונת התצוגה שעלינו דנו במקום אחר יש לה ערך אפשרי של none, שהוא בעל התוצאה המתוארת.
גלישה - overflow
מה הם עושים?
מכיוון שניתן כעת לקבוע את הגובה ואת הרוחב של האלמנטים בעזרת מחבר, אנו יכולים להיתקל במצב שבו האלמנט אינו גדול מספיק כדי להכיל את התכנים שלו. מה אנו עושים כאשר זה קורה? עבור דמויות, באורח מסורתי, הדמות נשקלת על מנת להתאים לגודלו של האלמנט. CSS מציג בפנינו את תכונת הגלישה כדי לאפשר לנו להגדיר כיצד הדפדפן אמור להציג אלמנטים, כאשר תכני האלמנט לא כולם מתאימים אל הרוחב והגובה של האלמנט.
ערכים אפשריים
גלישה יכולה לקבל את ערכיי מילות המפתח הבאות: visible (נראה לעין), hidden (מוסתר), scroll (מתגלגל), ו-auto.
גלישה נראית לעין פירושה שהדפדפן אמור להגדיל את הרוחב ו/או את הגובה של האלמנט כדי להציג את כל התכנים שלו.
גלישה מוסתרת פירושה כי הדפדפן אמור "לקצץ" את התכנים, ולהציג רק את התכנים הנראים לעין במסגרת הרוחב והגובה המוגדרים.
גלישה מתגלגלת (scroll) פירושה כי הדפדפן אמור למקם פסי גלילה על האלמנט בין אם התכנים של האלמנט גלשו או לא.
גלישה של auto פירושה כי הדפדפן אמור להוסיף פסי גלילה לפי הצורך כדי לאפשר למשתמשים לגלגל אופקית ו/או אנכית כדי להציג תכנים מוסתרים של האלמנט.
שני הערכים האחרונים אמורים להיות מוכרים לאלה שעבדו עם מסגרות ב-HTML. במסגרות יכול להיות גלגול (scroll) המוגדר כאף-פעם (never), תמיד (always) ו-auto. אלה מגיבים למוסתר (hidden), מתגלגל (scroll) ול-auto.
ערכים של ברירת מחדל
אם לא מוגדרת כל גלישה שהיא, הגלישה של האלמנט היא נראית לעין (visible).
האם זה עובר בירושה?
האלמנט אינו יורש את הגלישה של ההורה שלו.
רמזים והצעות
באופן תיאורטי, בעזרת תכונת הגלישה, הצורך במסגרות קטן באופן משמעותי. לרוע המזל, כמו בזמן הכתיבה, הדפדפנים לא תמכו בתכונת הגלישה.
ציפה - float
מה הם עושים?
מכל התכונות של CSS1 ו-CSS2, תכונת הציפה (float) והברור (clear) הן קרוב לוודאי שתי התכונות שהמשתמשים הם הכי פחות חשופים אליהן.
לציפה יש אפקט פשוט, אך האפקט בא בעקבות סדרת חוקים די מסובכת. אנו דנים בחוקים אלה באופן נרחב יותר בחלק אודות הרעיונות המתקדמים יותר של CSS .
האפקט של תכונת הציפה הוא לקחת אלמנט מסוים מתוך הזרימה ולמקם אותו משמאל או מימין לאלמנטים אחרים בתוך אותו אלמנט ההורה.
ערכים אפשריים
ניתן להגדיר את הציפה בעזרת אחת מתוך שלוש מילות המפתח הבאות: none, left and right.
ציפה של none פירושה כי האלמנט זורם כפי שהיה זורם בצורה טבעית בזרימה של הדף שלו.
ציפה של left פירושה כי האלמנט מנותק מן הזרימה הטבעית של הדף, ונוהגים בו כבאלמנט גוש לשמאלם של שאר התכנים של האלמנט ההורה שלו.
ציפה של right פירושה כי האלמנט מנותק מן הזרימה הטבעית של הדף, ונוהגים בו כבאלמנט גוש לימינם של שאר התכנים של אלמנט ההורה שלו.
ערכים של ברירת מחדל
אם לא הוגדרה כל ציפה שהיא, אזי לאלמנטים יש ציפה של none.
האם זה עובר בירושה?
האלמנט אינו יורש את הציפה של ההורה שלו.
רמזים והצעות
הציפה יכולה להיות רעיון לא פשוט, למרות שהאפקט הבסיסי הוא די ברור. בדקו בחלק שלנו אודות רעיונות מתקדמים עבור תמונה מלאה יותר על ציפה והיבטים אחרים של רישום דפים.
Clear (ברור)
מה הם עושים?
ניתן להשתמש בתכונת הברור בשילוב עם ציפה על מנת להגדיר האם ו/או היכן האלמנט מאפשר ציפה או לא. אתם יכולים להגדיר האם יכולים להיות לאלמנט אלמנטים הצפים לשמאלו, לימינו או אם בכלל. כאשר האלמנט אינו מאפשר ציפה מצד כלשהו, אזי כאשר נעשה ניסיון להציף אלמנט ילד לאותו הצד, האלמנט מופיע מתחת לאלמנט הצף.
ערכים אפשריים
ניתן להגדיר את clear כאחת מתוך מילות המפתח הבאות: none, left or right.
Clear שמילת המפתח שלו היא none, פירושו כי האלמנט אינו מאפשר ציפה בשום צד.
Clear שמילת המפתח שלו היא left, פירושו כי האלמנט אינו מאפשר ציפה בצידו השמאלי.
Clear שמילת המפתח שלו היא right, פירושו כי האלמנט אינו מאפשר ציפה לימינו.
ערכים של ברירת מחדל
אם לא הוגדר כל clear שהוא, לאלמנט יהיה clear של none, המאפשר ציפה משני הצדדים.
האם זה עובר בירושה?
האלמנט אינו יורש את ה-clear של ההורה שלו.
רמזים והצעות
ציפה ו-clear הן שתיהן תכונות שיהפכו, כאשר הן תתמכנה כמו שצריך ע"י הדפדפנים, לכלים מאוד שימושיים ליצירה של דפים המותאמים למסכים של קוראיהם. עד כה, התמיכה היא מוגבלת ועלובה, במיוחד עבור מקרים מסובכים.
קיצוץ - clip
מה הם עושים?
אזור הקיצוץ (clipping area) הוא החלק של האלמנט שנרשם למעשה באמת, בלי להתחשב במידה או במיקום של האלמנט. בעזרת הגדרה של קיצוץ האלמנט, ניתן להראות רק חלק מן האלמנט בכל פעם. אני אסווג אותו כאחד מן המאפיינים המתקדמים של CSS, שימושים רבי עוצמה, אך מקצועיים.
ערכים אפשריים
כעת, CSS מאפשר להגדיר את הקיצוץ של האלמנט או כצורה או בעזרת מילת המפתח auto.
נכון לעכשיו, סוג הצורה היחיד המוגדר הוא המלבן. אנו דנים ב ערך הצורה באופן מלא יותר בחלק שלנו העוסק בערכים.
קיצוץ של auto פירושו כי אזור הקיצוץ יתאים להיקף האלמנט, כלומר לרוחבו ולגובהו.
ערכים של ברירת מחדל
אם לא הוגדר כל ערך שהוא, הקיצוץ של האלמנט יהיה auto.
האם זה עובר בירושה?
האלמנט אינו יורש את הקיצוץ של ההורה שלו, אך עיינו ברמזים, שלמטה, עבור כיצד הקיצוץ וקיצוץ ההורה עובדים ביחד כדי לקבוע את התחום האמיתי שבתוכו האלמנט יירשם.
רמזים והצעות
בזמן שהקיצוץ מגדיר את תחום הקיצוץ עבור האלמנט, התחום האמיתי שבתוכו האלמנט נרשם הוא החיתוך שבין האזור שבו ההורה יירשם והקיצוץ של האלמנט.
שימו לב כי ניתן ליישם את תכונת הקיצוץ אך ורק עבור אלמנטים שיש להם ערך מיקום מוחלט או קבוע.
תכונות | סגנון טקסט | מערך טקסט | רקע | גבול | שוליים | ריפוד | מערך עמוד | סוג אלמנט | ממשק משתמש
|
